<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
      <view class="nav-content">
        <view class="nav-left" @click="goBack">
          <u-icon name="arrow-left" color="#333" size="18"></u-icon>
        </view>
        <view class="nav-title">认购记录</view>
        <view class="nav-right"></view>
      </view>
    </view>
    
    <!-- 选项卡 -->
    <view class="tabs-container" :style="{marginTop: (statusBarHeight + 44) + 'px'}">
      <view class="tabs">
        <view 
          class="tab-item" 
          v-for="(tab, index) in tabsList" 
          :key="index"
          :class="{ active: current === index }"
          @click="switchTab(index)"
        >
          {{ tab.name }}
          <view class="tab-line" v-if="current === index"></view>
        </view>
      </view>
    </view>


    
    <!-- 内容区域 -->
    <scroll-view 
      class="content-scroll"
      :style="{paddingTop: (statusBarHeight + 88) + 'px'}"
      scroll-y 
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="refresh"
    >
      <view class="adopt-list">
        <view 
          v-for="(item, index) in currentList" 
          :key="item.id"
          class="swipe-item"
          :class="{ 'swipe-open': item.swipeOpen }"
        >
          <!-- 滑动内容 -->
          <view 
            class="swipe-content"
            @touchstart="onTouchStart($event, index)"
            @touchmove="onTouchMove($event, index)"
            @touchend="onTouchEnd($event, index)"
            :style="{ transform: `translateX(${item.translateX || 0}px)` }"
          >
            <view class="adopt-item">
          <!-- 认养标签 -->
          <view class="adopt-tag">
            <text>农场</text>
            <text>认养</text>
          </view>
          
          <!-- 认养内容 -->
          <view class="adopt-content">
                <view class="adopt-header">
            <view class="adopt-title">{{ item.title }}</view>
                  <!-- 状态标签 -->
                  <u-tag 
                    :text="getStatusTag(item.status).text" 
                    :type="getStatusTag(item.status).type"
                    :bg-color="getStatusTag(item.status).bgColor"
                    :color="getStatusTag(item.status).color"
                    size="mini"
                    shape="circle"
                  ></u-tag>
                </view>
            <view class="adopt-info">
              <view class="info-item">
                <text class="info-value">{{ item.price }}</text>
                <text class="info-label">元</text>
              </view>
              <view class="info-item">
                <text class="info-value">{{ item.duration }}</text>
                <text class="info-label">周期/天</text>
              </view>
              <view class="info-item">
                <text class="info-value">{{ item.remaining }}</text>
                <text class="info-label">个数</text>
              </view>
            </view>
            <view class="adopt-actions">
              <button 
                v-if="item.status === 'unpaid'" 
                class="action-btn"
                @click.stop="cancelOrder(item)"
              >
                取消订单
              </button>
              <button 
                v-if="item.status === 'unpaid'"
                class="action-btn pay-btn"
                @click.stop="payOrder(item)"
              >
                付款
              </button>
              <button 
                v-if="item.status === 'adopting'"
                class="action-btn detail-btn"
                @click.stop="viewDetail(item)"
              >
                查看详情
              </button>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 滑动操作按钮 -->
          <view 
            v-if="item.status === 'cancelled'" 
            class="swipe-actions"
            @click="deleteOrder(item, index)"
          >
            <view class="swipe-btn delete-btn">
              <text>删除</text>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="currentList.length === 0" class="empty-state">
          <image src="http://121.36.197.175:19000/test/empty-adopt.png" mode="aspectFit" class="empty-image"></image>
          <text class="empty-text">{{ getEmptyStateText() }}</text>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <u-loadmore 
        v-if="currentList.length > 0"
        :status="currentLoadStatus" 
        :loadText="loadText"
        margin-top="20"
        margin-bottom="20"
      />
    </scroll-view>
  </view>
</template>

<script>
import request from '@/util/request.js';

export default {
  components: {
    
  },
  data() {
    return {
      statusBarHeight: 0,
      // 选项卡配置
      tabsList: [
        { name: '全部', type: 'all' },
        { name: '待付款', type: 'unpaid' },
        { name: '认养中', type: 'adopting' },
        { name: '已完成', type: 'completed' }
      ],
      current: 0,
      
      // 数据列表 - 分别存储不同选项卡的数据
      allData: [],        // 全部订单
      unpaidData: [],     // 待付款订单
      adoptingData: [],   // 认养中订单
      completedData: [], // 已完成订单
      
      // 每个选项卡的加载状态
      loadStatus: {
        all: 'loadmore',
        unpaid: 'loadmore',
        adopting: 'loadmore', 
        completed: 'loadmore'
      },
      loadText: {
        loadmore: '点击或上拉加载更多',
        loading: '正在加载...',
        nomore: '没有更多了'
      },
      page: 1,
      refreshing: false,
      userId: null,
      
      // 滑动相关状态
      touchData: {
        startX: 0,
        currentX: 0,
        startTime: 0
      }
    };
  },
  
  computed: {
    // 当前显示的列表
    currentList() {
      const type = this.tabsList[this.current].type;
      switch (type) {
        case 'all':
          return this.allData;
        case 'unpaid':
          return this.unpaidData;
        case 'adopting':
          return this.adoptingData;
        case 'completed':
          return this.completedData;
        default:
          return [];
      }
    },
    
    // 当前选项卡的加载状态
    currentLoadStatus() {
      const type = this.tabsList[this.current].type;
      return this.loadStatus[type] || 'nomore';
    }
  },
  
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    
    this.initPage();
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 切换选项卡
    switchTab(index) {
      this.current = index;
      
      // 根据选项卡类型决定是否需要加载数据
      const type = this.tabsList[index].type;
      
      console.log(`切换到选项卡: ${type}, 索引: ${index}`);
      console.log(`当前数据状态:`, {
        allData: this.allData.length,
        unpaidData: this.unpaidData.length,
        adoptingData: this.adoptingData.length,
        completedData: this.completedData.length
      });
      
      // 每次切换选项卡都重新加载最新数据
      console.log(`切换到 ${type} 选项卡，重新加载数据`);
      this.loadData();
    },
    
    // 初始化页面
    async initPage() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo || !userInfo.userId) {
        uni.showToast({
          title: '请先登录',
          icon: 'none',
          duration: 2000,
          complete: () => {
            setTimeout(() => {
              uni.navigateTo({ url: '/pages/login/login' });
            }, 2000);
          }
        });
        return;
      }
      
      this.userId = userInfo.userId;
      this.loadData();
    },
    
    // 加载数据
    async loadData() {
      const currentTabType = this.tabsList[this.current].type;
      
      // 现在所有选项卡都支持加载数据了
      
      try {
        this.loadStatus[currentTabType] = 'loading';
        
        let url = '';
        let dataKey = '';
        let targetArray = '';
        
        // 根据选项卡类型设置不同的接口
        if (currentTabType === 'all') {
          url = `/adopt-service/order/getUserAdoptOrders/${this.userId}`;
          dataKey = 'adoptOrders';
          targetArray = 'allData';
        } else if (currentTabType === 'unpaid') {
          url = `/adopt-service/order/getUserUnpaidAdoptOrders/${this.userId}`;
          dataKey = 'unpaidOrders';
          targetArray = 'unpaidData';
        } else if (currentTabType === 'adopting') {
          url = `/adopt-service/order/getUserActiveAdoptOrders/${this.userId}`;
          dataKey = 'activeOrders';
          targetArray = 'adoptingData';
        } else if (currentTabType === 'completed') {
          url = `/adopt-service/order/getUserCompletedAdoptOrders/${this.userId}`;
          dataKey = 'completedOrders';
          targetArray = 'completedData';
        }
        
        console.log(`请求URL: ${url}`);
        
        // 调用后端接口获取用户认养订单
        const response = await request({
          url: url,
          method: 'GET'
        });
        

        
        if (response.success && response.data && response.data[dataKey]) {
          // 转换后端数据格式为前端需要的格式
          const orders = response.data[dataKey].map(item => ({
            id: item.orderId,
            title: item.adoptName,
            price: item.orderAmount,
            duration: item.leastTime,
            remaining: item.orderQuantity,
            status: this.getStatusByTabType(currentTabType, item.orderStatus),
            tag: '农场认养',
            // 滑动相关属性
            translateX: 0,
            swipeOpen: false
          }));
          
          console.log(`获取到 ${orders.length} 条${this.getTabTypeName(currentTabType)}订单记录`);
          
          // 将数据存储到对应的数据源
          if (this.page === 1) {
            this[targetArray] = orders;
          } else {
            this[targetArray].push(...orders);
          }
          
          this.loadStatus[currentTabType] = 'nomore';
        } else {
          this[targetArray] = [];
          this.loadStatus[currentTabType] = 'nomore';
        }

      } catch (error) {
        console.error(`加载${this.getTabTypeName(currentTabType)}数据失败:`, error);
        this.loadStatus[currentTabType] = 'loadmore';
        this[targetArray] = [];
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 转换订单状态
    convertOrderStatus(backendStatus) {
      // 后端状态: 0-已取消, 1-已付款(认养中), 2-待付款
      switch (backendStatus) {
        case 0:
          return 'cancelled'; // 已取消
        case 1:
          return 'adopting'; // 认养中
        case 2:
          return 'unpaid'; // 待付款
        default:
          return 'all';
      }
    },
    

    
    // 刷新
    async refresh() {
      this.refreshing = true;
      this.page = 1;
      
      // 根据当前选项卡类型清空对应的数据
      const type = this.tabsList[this.current].type;
      
      // 所有选项卡都支持刷新
      
      // 清空当前选项卡的数据并重新加载
      const dataArrayName = this.getDataArrayName(type);
      this[dataArrayName] = [];
      
      // 重置滑动状态
      this.closeAllSwipes();
      
      await this.loadData();
      
      this.refreshing = false;
    },
    
    // 加载更多
    loadMore() {
      // 所有选项卡都支持加载更多
      const currentTabType = this.tabsList[this.current].type;
      if (this.loadStatus[currentTabType] === 'loadmore') {
        this.page++;
        this.loadData();
      }
    },
    
    // 获取空状态文本
    getEmptyText() {
      const type = this.tabsList[this.current].type;
      switch (type) {
        case 'unpaid': return '待付款';
        case 'adopting': return '认养中';
        case 'completed': return '已完成';
        default: return '认养';
      }
    },
    
    // 获取完整的空状态文本
    getEmptyStateText() {
      const type = this.tabsList[this.current].type;
      console.log(`当前选项卡类型: ${type}, 数据长度: ${this.currentList.length}`);
      
      switch (type) {
        case 'all':
          return '暂无认养记录';
        case 'unpaid':
          return '暂无待付款订单';
        case 'adopting':
          return '暂无认养中订单';
        case 'completed':
          return '暂无已完成订单';
        default:
          return '暂无数据';
      }
    },
    
    // 根据选项卡类型获取对应的状态
    getStatusByTabType(tabType, orderStatus) {
      switch (tabType) {
        case 'unpaid':
          return 'unpaid';
        case 'adopting':
          return 'adopting';
        case 'completed':
          return 'completed';
        case 'all':
        default:
          return this.convertOrderStatus(orderStatus);
      }
    },
    
    // 获取选项卡类型的中文名称
    getTabTypeName(tabType) {
      switch (tabType) {
        case 'all':
          return '全部';
        case 'unpaid':
          return '待付款';
        case 'adopting':
          return '认养中';
        case 'completed':
          return '已完成';
        default:
          return tabType;
      }
    },
    
    // 获取数据数组名称
    getDataArrayName(tabType) {
      switch (tabType) {
        case 'all':
          return 'allData';
        case 'unpaid':
          return 'unpaidData';
        case 'adopting':
          return 'adoptingData';
        case 'completed':
          return 'completedData';
        default:
          return 'allData';
      }
    },
    
    // 获取状态标签配置
    getStatusTag(status) {
      switch (status) {
        case 'unpaid':
          return {
            text: '待付款',
            type: 'warning',
            bgColor: '#fff7e6',
            color: '#fa8c16'
          };
        case 'cancelled':
          return {
            text: '已取消',
            type: 'info',
            bgColor: '#f6f6f6',
            color: '#909399'
          };
        case 'adopting':
          return {
            text: '认养中',
            type: 'primary',
            bgColor: '#e6f7ff',
            color: '#1890ff'
          };
        case 'completed':
          return {
            text: '已完成',
            type: 'success',
            bgColor: '#f6ffed',
            color: '#52c41a'
          };
        default:
          return {
            text: '未知',
            type: 'info',
            bgColor: '#f6f6f6',
            color: '#909399'
          };
      }
    },

    
    // 取消订单
    async cancelOrder(item) {
      console.log('点击取消订单，订单信息:', item);
      
      try {
        const res = await uni.showModal({
          title: '确认取消',
          content: '确定要取消这个订单吗？'
        });
        
        console.log('用户选择结果:', res);
        
        // 处理不同环境下uni.showModal的返回值差异
        let result;
        if (Array.isArray(res)) {
          // 如果返回的是数组，取第二个元素
          result = res[1];
        } else {
          // 如果返回的是对象，直接使用
          result = res;
        }
        
        console.log('处理后的结果:', result);
        console.log('confirm的值:', result.confirm);
        
                  if (result.confirm === true) {
            console.log(`准备取消订单，订单ID: ${item.id}`);
            
            uni.showLoading({
              title: '取消中...'
            });
            
            const url = `/adopt-service/order/cancelOrder/${item.id}`;
            console.log('调用取消订单接口:', url);
            
            const response = await request({
              url: url,
              method: 'POST',
            });
            
            console.log('取消订单接口响应:', response);
            
            uni.hideLoading();
            
            if (response.success) {
              // 取消成功后，先更新本地订单状态为已取消
              item.status = 'cancelled';
              
              uni.showToast({
                title: '取消成功',
                icon: 'success'
              });
              
              // 延迟刷新数据，让用户先看到状态变化
              setTimeout(() => {
                this.refresh();
              }, 1000);
            } else {
          uni.showToast({
                title: response.message || '取消失败',
            icon: 'none'
          });
            }
        } else {
          console.log('用户取消了操作');
        }
      } catch (error) {
        uni.hideLoading();
        console.error('取消订单失败:', error);
        uni.showToast({
          title: '取消失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 去付款
    async payOrder(item) {
      try {
        uni.showLoading({
          title: '获取订单信息...'
        });
        
        // 通过订单ID获取完整的订单信息
        const response = await request({
          url: `/adopt-service/order/detail/${item.id}`,
          method: 'GET'
        });
        
        uni.hideLoading();
        
        if (response.success && response.data && response.data.orderDetail) {
          const orderDetail = response.data.orderDetail;
          
          // 准备跳转参数，将订单信息转换为商品信息格式
          const params = {
            orderId: item.id,                    // 订单ID
            id: orderDetail.relatedId,           // 商品ID  
            title: encodeURIComponent(orderDetail.adoptName || item.title),
            price: orderDetail.orderAmount || item.price,
            image: encodeURIComponent(orderDetail.productImage || 'http://121.36.197.175:19000/test/default-product.png'),
            quantity: orderDetail.orderQuantity || item.remaining,
            periodDays: orderDetail.leastTime || item.duration,
            type: 'pay'                          // 标记这是付款操作
          };
          
          const queryString = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
          
      uni.navigateTo({
            url: `/pages/farm/orderInfo?${queryString}`
          });
        } else {
          uni.showToast({
            title: response.message || '获取订单信息失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('获取订单详情失败:', error);
        uni.showToast({
          title: '获取订单信息失败，请重试',
          icon: 'none'
      });
      }
    },
    
    // 查看详情
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/farm/adoptDetail?orderId=${item.id}`
      });
    },
    

    
    // 触摸开始
    onTouchStart(e, index) {
      const item = this.currentList[index];
      
      // 只有已取消状态的订单才可以滑动
      if (item.status !== 'cancelled') {
        return;
      }
      
      this.touchData.startX = e.touches[0].clientX;
      this.touchData.currentX = e.touches[0].clientX;
      this.touchData.startTime = Date.now();
      
      // 关闭其他已打开的滑动项
      this.closeOtherSwipes(index);
    },
    
    // 触摸移动
    onTouchMove(e, index) {
      const item = this.currentList[index];
      
      // 只有已取消状态的订单才可以滑动
      if (item.status !== 'cancelled') {
        return;
      }
      
      this.touchData.currentX = e.touches[0].clientX;
      const deltaX = this.touchData.currentX - this.touchData.startX;
      
      // 向左滑动才显示操作按钮
      if (deltaX < 0) {
        const translateX = Math.max(deltaX, -80); // 最大滑动80px
        this.$set(item, 'translateX', translateX);
      } else if (item.translateX < 0) {
        // 向右滑动时恢复
        const translateX = Math.min(0, deltaX + item.translateX);
        this.$set(item, 'translateX', translateX);
      }
    },
    
    // 触摸结束
    onTouchEnd(e, index) {
      const item = this.currentList[index];
      
      // 只有已取消状态的订单才可以滑动
      if (item.status !== 'cancelled') {
        return;
      }
      
      const deltaX = this.touchData.currentX - this.touchData.startX;
      const deltaTime = Date.now() - this.touchData.startTime;
      
      // 判断是否应该打开滑动操作
      if (deltaX < -30 || (deltaX < -10 && deltaTime < 300)) {
        // 滑动距离超过30px或快速滑动，打开操作菜单
        this.$set(item, 'translateX', -80);
        this.$set(item, 'swipeOpen', true);
      } else {
        // 关闭操作菜单
        this.$set(item, 'translateX', 0);
        this.$set(item, 'swipeOpen', false);
      }
    },
    
    // 关闭其他滑动项
    closeOtherSwipes(currentIndex) {
      this.currentList.forEach((item, index) => {
        if (index !== currentIndex && item.swipeOpen) {
          this.$set(item, 'translateX', 0);
          this.$set(item, 'swipeOpen', false);
        }
      });
    },
    
    // 关闭所有滑动项
    closeAllSwipes() {
      this.currentList.forEach((item) => {
        this.$set(item, 'translateX', 0);
        this.$set(item, 'swipeOpen', false);
      });
    },
    
    // 删除订单
    async deleteOrder(item, index) {
      console.log('点击删除按钮，订单信息:', item);
      
      try {
        const res = await uni.showModal({
          title: '确认删除',
          content: '确定要删除这个订单记录吗？删除后将无法恢复。'
        });
        
        // 处理不同环境下uni.showModal的返回值差异
        let result;
        if (Array.isArray(res)) {
          result = res[1];
        } else {
          result = res;
        }
        
        if (result.confirm === true) {
          console.log(`准备删除订单，订单ID: ${item.id}`);
          
          uni.showLoading({
            title: '删除中...'
          });
          
          const url = `/adopt-service/order/deleteOrder/${item.id}`;
          console.log('调用删除订单接口:', url);
          
          const response = await request({
            url: url,
            method: 'POST'
          });
          
          console.log('删除订单接口响应:', response);
          
          uni.hideLoading();
          
          if (response.success) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            
            // 从当前列表中移除该订单
            const currentTabType = this.tabsList[this.current].type;
            const dataArrayName = this.getDataArrayName(currentTabType);
            this[dataArrayName].splice(index, 1);
            
          } else {
            uni.showToast({
              title: response.message || '删除失败',
              icon: 'none'
            });
          }
        } else {
          console.log('用户取消了删除操作');
        }
      } catch (error) {
        uni.hideLoading();
        console.error('删除订单失败:', error);
        uni.showToast({
          title: '删除失败，请重试',
          icon: 'none'
        });
      }
    },
    

  },
  
  onShow() {
    // 页面显示时刷新当前选项卡的数据
    if (this.userId) {
      this.refresh();
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 自定义导航栏 */
.nav-bar {
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.status-bar {
  width: 100%;
  background-color: #ffffff;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  flex: 1;
}

.nav-right {
  width: 60rpx;
  flex-shrink: 0;
}

/* 选项卡容器 */
.tabs-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
}

/* 选项卡样式 */
.tabs {
  display: flex;
  height: 88rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4CAF50;
  font-weight: 500;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background-color: #4CAF50;
  border-radius: 4rpx;
}



/* Swiper容器样式 */
.swiper-container {
  flex: 1;
  height: calc(100vh - 88px);
}

.swiper-item {
  height: 100%;
}

.scroll-view {
  height: 100%;
}

/* 内容区域 */
.content-scroll {
  box-sizing: border-box;
  height: 100vh;
  /* padding-top 通过内联样式动态设置，包含状态栏高度和选项卡高度 */
}

.adopt-list {
  padding: 12px;
}

/* 滑动项容器 */
.swipe-item {
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 8px;
}

/* 滑动内容 */
.swipe-content {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
  background-color: #fff;
}

/* 滑动操作按钮容器 */
.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* 滑动按钮 */
.swipe-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}

.delete-btn {
  background-color: #dd524d;
}

/* 列表项样式 */
.adopt-item {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  position: relative;
}

/* 移除这个样式，因为margin-bottom现在在swipe-item上 */

.adopt-tag {
  width: 60px;
  height: 60px;
  background-color: #4CAF50;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  margin-right: 12px;
  flex-shrink: 0;
}

.adopt-content {
  flex: 1;
}

.adopt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.adopt-title {
  font-size: 15px;
  color: #333;
  font-weight: normal;
  flex: 1;
}

.adopt-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.info-value {
  font-size: 17px;
  color: #333;
  margin-bottom: 4px;
}

.info-label {
  font-size: 12px;
  color: #999;
}

.adopt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.action-btn {
  padding: 6px 16px;
  border-radius: 15px;
  font-size: 14px;
  border: 1px solid #ddd;
  background-color: #ffffff;
  line-height: 1.4;
}

.pay-btn {
  color: #4CAF50;
  border-color: #4CAF50;
}

.detail-btn {
  color: #1976D2;
  border-color: #1976D2;
}

/* 空状态样式 */
.empty-state {
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-image {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 14px;
  color: #999;
}
</style> 